<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html>
<html>
<head>
	<title>阿玛尼护肤造型</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH}content/scripts/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH}content/css/ratchet.min.css?v=1.7">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH}content/css/storefront.css">
	<script src="${ROOT_PATH}content/scripts/jquery-1.10.1.min.js"></script>
	<script src="${ROOT_PATH}content/scripts/juery.hammer.js"></script>
	<script src="${ROOT_PATH}content/scripts/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<section>
		<div class="container-fluid" style="position: relative;color: white;">
			<div class="row" style="position: relative;">
				<img alt="..." src="${pro.mainimageurl}" class="img-responsive">
				<div style="position: absolute;bottom: 0px;width: 95.2%;">
					<div class="row" style="background: rgba(24,24,24,0.5);">
						<div class="col-xs-12" style="padding:5px 0 5px 30px;font-size: 18px;">${pro.name}</div>
					</div>
					<div class="row" style="background: rgba(24,24,24,0.5);">
						<div class="col-xs-12" style="padding-left: 30px;line-height: 20px;">
							<span style="color: #B89D62;font-size: 28px;">&yen;${pro.price}</span>
							<span style="text-decoration: line-through;margin-left: 10px;font-size: 18px;">&yen;${pro.originalcost}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="row text-center" style="margin-top: 20px;white-space: nowrap;">
				<div class="col-xs-6">
					<img alt="..." src="${ROOT_PATH}content/images/p1_bzlc.png" class="img-responsive" style="width: 28px;display: inline;">
					<span style="vertical-align: middle;">标准流程</span>
				</div>
				<div class="col-xs-6">
					<img alt="..." src="${ROOT_PATH}content/images/p1_wyxxf.png" class="img-responsive" style="width: 28px;display: inline;">
					<span style="vertical-align: middle;">无隐形消费</span>
				</div>
			</div>
			<div class="row" style="margin-top: 20px;color: #B89D62;">
				<div class="col-xs-12">项目介绍</div>
			</div>
			<div class="row" style="margin-top: 20px;">
				<div class="col-xs-12">
					<p style="color: white;font-size: 16px;text-indent:2em;">${pro.content}</p>
				</div>
			</div>
			<div class="row" style="margin: 30px -10px 5px -10px;background-color: #303030;padding: 10px 0;">
				<div class="col-xs-6">${fn:length(stepSet)}&nbsp;个步骤</div>
				<div class="col-xs-6 text-right">约&nbsp;${pro.minute}&nbsp;分钟</div>
			</div>
			<div class="row" style="margin: 10px -5px;">
				<div id="myCarousel" class="carousel slide">
				   <!-- 轮播（Carousel）指标 -->
				   <ol class="carousel-indicators">
				   	<c:forEach items="${stepSet}" varStatus="status">
				   		<li data-target="#myCarousel" data-slide-to="${status.index}" ${status.first ? 'class="active"' : ''}></li>
				   	</c:forEach>
				   </ol>   
				   <!-- 轮播（Carousel）项目 -->
				   <div class="carousel-inner">
			   		<c:forEach var="_slide" items="${stepSet}" varStatus="status">
				      	<div class="item ${status.first ? 'active' : ''}">
				         	<img alt="slide image" class="img-responsive" src="${_slide.imageurl}" onerror="this.src='${ROOT_PATH}content/images/p1_head.png'"/>
				         	  <div class="carousel-caption"><p style="color:#B89D62;">${_slide.imageDescription}</p></div>
				      	</div>
			    	</c:forEach>
				   </div>
				</div> 
			</div>
			<div class="col-xs-12 text-center" style="padding: 10px 0;">
				<button class="btn btn-outlined">立即预约</button>
				<form id="doForm" name="doForm" action="${ROOT_PATH}Orders/mf/Step2" method="post">
					<input type="hidden" id="xcoordinate" name="xcoordinate"/>
					<input type="hidden" id="ycoordinate" name="ycoordinate"/>
					<input type="hidden" id="ordersFactProject" name="ordersFactProject" value="${pro.type}"/>
					<input type="hidden" id="projectno" name="projectno" value="${pro.id}"/>
					<input type="hidden" id="projectname" name="projectname" value="${pro.name}"/>
					<input type="hidden" id="cardid" name="cardid" value="${pro.card_id}"/>
					<input type="hidden" id="price" name="price" value="${pro.price}"/>
					<input type="hidden" id="sourceType" name="sourceType" value="Storefront" />
				</form>
			</div>
		</div>
	</section>
	<script type="text/javascript">
		$(window).load(function(){
			var showPosition= function (position){
		        $("#xcoordinate").val(position.coords.latitude);
		        $("#ycoordinate").val(position.coords.longitude);
		    };
			navigator.geolocation.getCurrentPosition(showPosition);
		});
		$(function(){
			$('#myCarousel').carousel('cycle');
			$('.carousel').hammer().on('swipeleft', function(){
				  $(this).carousel('next');
			 });
			$('.carousel').hammer().on('swiperight', function(){
		  		  $(this).carousel('prev');
			});
			$("button").click(function(){
				/* var openids=["orCjajnADjE1mhSo3K5gHzODwdeI",""];
	        	 var contiansId=false;
	        	 for(var i=0;i<openids;i++){
	        		 if(openids[i]=="${openid }"){
	        			 contiansId=true;
	        			 break;
	        		 }
	        	 }
	        	 if(!contiansId){
	        		 alert("内测期间，未受邀请用户暂时无法使用，请您见谅！"); 
	        		 return;
	        	 } */
				var ordersFactProject = $("#ordersFactProject");
				if(ordersFactProject.val()=="1"){//面部
					ordersFactProject.val("004");
				}else{//身体
					ordersFactProject.val("005");
				}
				$("#doForm").submit();
			});
		});
	</script>
</body>
</html>